<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Information</title>
    <style>
        #ProgressImageCanvas {
            border: 1px solid #000;
        }
        #card {
            position: absolute;
            padding: 10px;
            background-color: white;
            border: 1px solid black;
            display: none;
        }
    </style>
</head>
<body>
    <canvas id="ProgressImageCanvas" width="350" height="350"></canvas>
    <div id="card"></div>

    <script>
        // Function to fetch prediction data from the backend
        async function fetchPredictionData() {
            const response = await fetch('/get_prediction');
            const data = await response.json();
            return data;
        }

        // Function to draw the image using the prediction data
        function drawImage(outputs, targetNames, eachAcc, categoryColors) {
            const canvas = document.getElementById("ProgressImageCanvas");
            const ctx = canvas.getContext("2d");

            const canvasWidth = 300;
            const canvasHeight = 300;
            const numRows = outputs.length;
            const numCols = outputs[0].length;

            const pixelWidth = canvasWidth / numCols;
            const pixelHeight = canvasHeight / numRows;


            // Draw the outputs on the canvas
            for (let y = 0; y < numRows; y++) {
                for (let x = 0; x < numCols; x++) {
                    const category = outputs[y][x] - 1;  // Adjust for 0-based index
                    if (category >= 0) {
                        ctx.fillStyle = categoryColors[category];
                    } else {
                        ctx.fillStyle = '#000000';  // If category is 0, make it black
                    }
                    ctx.fillRect(x * pixelWidth, y * pixelHeight, pixelWidth, pixelHeight);  // Draw pixel block
                }
            }

            // Add hover event to display category info
            const card = document.getElementById("card");

            canvas.addEventListener("mousemove", function(event) {
                const rect = canvas.getBoundingClientRect();
                const x = Math.floor((event.clientX - rect.left) / pixelWidth);
                const y = Math.floor((event.clientY - rect.top) / pixelHeight);

                const category = outputs[y][x] - 1;  // Get category index

                if (category >= 0) {
                    const categoryName = targetNames[category];
                    const accuracy = eachAcc[category].toFixed(2);

                    card.innerHTML = `类&nbsp;&nbsp;&nbsp;别： ${categoryName}<br>准确率： ${accuracy}%`;
                    card.style.left = `${event.clientX + 10}px`;
                    card.style.top = `${event.clientY + 10}px`;
                    card.style.display = "block";
                } else {
                    card.style.display = "none";  // Hide card if category is 0
                }
            });

            canvas.addEventListener("mouseout", function() {
                card.style.display = "none";
            });
        }

        // Load the prediction data and render the image
        fetchPredictionData().then(data => {
            const outputs = data.outputs;
            const targetNames = data.target_names;
            const eachAcc = data.each_acc;
            const categoryColors = data.category_colors;

            drawImage(outputs, targetNames, eachAcc, categoryColors);
        });
    </script>
</body>
</html>
